<template>
  <el-dialog
    v-model="dialogVisible"
    :title="isEditing ? '编辑任务' : '创建任务'"
    width="500px"
    @close="handleClose"
  >
    <el-form :model="formData" label-width="100px">
      <el-form-item label="任务名称">
        <el-input
          v-model="formData.resultName"
          placeholder="请输入任务名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="任务类型">
        <el-select
          v-model="formData.taskType"
          placeholder="选择任务类型"
          style="width: 100%"
        >
          <el-option label="变化检测" value="变化检测"></el-option>
          <el-option label="地物分类" value="地物分类"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="任务来源">
        <el-select
          v-model="formData.taskSource"
          placeholder="选择任务来源"
          style="width: 100%"
        >
          <el-option label="系统自动生成" value="系统自动生成"></el-option>
          <el-option label="中心下发" value="中心下发"></el-option>
          <el-option label="委托生产" value="委托生产"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="检测时间">
        <el-select
          v-model="formData.detectionTime"
          placeholder="选择检测时间"
          style="width: 100%"
        >
          <el-option label="2024第一季度" value="2024第一季度"></el-option>
          <el-option label="2024第二季度" value="2024第二季度"></el-option>
          <el-option label="2024第三季度" value="2024第三季度"></el-option>
          <el-option label="2024第四季度" value="2024第四季度"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="confirmDialog">确 定</el-button>
        <el-button @click="handleClose">取 消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

// 定义组件接收的 props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  isEditing: {
    type: Boolean,
    default: false,
  },
  task: {
    type: Object,
    default: () => ({
      id: "",
      resultName: "",
      taskType: "变化检测",
      taskSource: "",
      detectionTime: "",
    }),
  },
});

// 定义 emit 事件
const emit = defineEmits(["close", "confirm"]);

// 对话框显示状态
const dialogVisible = ref(false);

// 表单数据
const formData = reactive({
  id: "",
  resultName: "",
  taskType: "变化检测",
  taskSource: "",
  detectionTime: "",
});

// 监听 visible prop 变化
watch(
  () => props.visible,
  (newVal) => {
    dialogVisible.value = newVal;
  }
);

// 监听 task prop 变化
watch(
  () => props.task,
  (newVal) => {
    Object.assign(formData, newVal);
  }
);

// 确认操作
const confirmDialog = () => {
  // 进行表单验证
  if (!formData.resultName) {
    ElMessage.warning("请输入任务名称");
    return;
  }
  if (!formData.taskType) {
    ElMessage.warning("请选择任务类型");
    return;
  }
  if (!formData.taskSource) {
    ElMessage.warning("请选择任务来源");
    return;
  }

  // 触发确认事件
  emit("confirm", { ...formData });
};

// 关闭对话框
const handleClose = () => {
  emit("close");
};
</script>

<style scoped>
/* 可以添加一些特定的样式 */
:deep(.el-dialog__body) {
  padding: 20px;
}

:deep(.el-form-item) {
  margin-bottom: 15px;
}
</style>
